<template>
     <div class="locationWrapper">
           <svg viewBox="0 0 32 32" class="icon iconLocation">
                <path fill="#81838E" fill-rule="evenodd"
                      d="M14.521 30.445c.817.738 2.142.75 2.958 0 0 0 11.521-9.82 11.521-17.158C29 5.95 23.18 0 16 0S3 5.949 3 13.287c0 7.339 11.521 17.158 11.521 17.158zM16 18a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"></path>
            </svg>
            <span class="address">{{selectedOptions[2] || city || '福州市'}}</span>
            <svg viewBox="0 0 32 32" class="icon iconArrow">
                <path fill="#81838E" fill-rule="evenodd"
                      d="M14.724 19.17c.783.784 2.05.788 2.837 0l5.047-5.047c1.173-1.172.776-2.123-.869-2.123H10.545c-1.652 0-2.04.952-.869 2.123l5.048 5.048z"></path>
            </svg>
          <el-cascader
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            :show-all-levels="false"
            v-model="selectedOptions"
            @change="handleAreaChange"
            :separator="' '"
          />
        </div>
</template>

<script>
   // 引入三级联动的城市数据
  import options from '../../config/area'
  export default {
    name: 'citySelector',
    props: {
    },
    data () {
      return {
             selectedOptions: [], //存放选择的城市
        options:options,     //存放城市数据
        city: '',  // 定位的城市
      }
    },
      mounted() {
      this.getLocation();
    },
    methods: {
      handleAreaChange(value) {
      
      },
      getLocation(){
        let geolocation = new qq.maps.Geolocation("3PXBZ-DOQK6-FQISF-M2BXT-MOETT-L6FIM", "myapp");
        geolocation.getLocation(this.showPosition, this.showError);
      },
      showPosition(position){
        this.city = position.city;
      }
      }
  }
</script>

 <style scoped>
 .locationWrapper{
  position: relative;
  max-width: 100px;
 line-height: 60px;
 height: 60px;
  display: flex;
  align-items: center;

}
.locationWrapper .el-cascader{
  position: absolute;
  opacity: 0;
}
.locationWrapper .address{
  max-width: 58px;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.locationWrapper .icon{
  margin: 0 3px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
.locationWrapper .icon path{
  fill: #dd6161;
}
 </style>